<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
	<html lang="zxx" class="no-js">
	<head>
		<!-- Mobile Specific Meta -->
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Favicon-->
		<link rel="shortcut icon" href="${pageContext.request.contextPath}/page/img/fav.png">
		<!-- Author Meta -->
		<meta name="author" content="colorlib">
		<!-- Meta Description -->
		<meta name="description" content="">
		<!-- Meta Keyword -->
		<meta name="keywords" content="">
		<!-- meta character set -->
		<meta charset="UTF-8">
		<!-- Site Title -->
		<title>GO运动</title>

		<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet"> 
			<!--
			CSS
			============================================= -->
			<link rel="stylesheet" href="${pageContext.request.contextPath}/page/css/linearicons.css">
			<link rel="stylesheet" href="${pageContext.request.contextPath}/page/css/font-awesome.min.css">
			<link rel="stylesheet" href="${pageContext.request.contextPath}/page/css/bootstrap.css">
			<link rel="stylesheet" href="${pageContext.request.contextPath}/page/css/magnific-popup.css">
			<link rel="stylesheet" href="${pageContext.request.contextPath}/page/css/nice-select.css">							
			<link rel="stylesheet" href="${pageContext.request.contextPath}/page/css/animate.min.css">
			<link rel="stylesheet" href="${pageContext.request.contextPath}/page/css/owl.carousel.css">			
			<link rel="stylesheet" href="${pageContext.request.contextPath}/page/css/jquery-ui.css">			
			<link rel="stylesheet" href="${pageContext.request.contextPath}/page/css/main.css">
		</head>
		<body>	
			  <header id="header">
		  <%--		<div class="header-top">
		  			<div class="container">
				  		<div class="row align-items-center justify-content-center">
				  			<div class="col-md-4 col-4 header-top-left no-padding">
				        		<a href="mailto:support@colorlib.com"><span class="lnr lnr-location"></span></a>
				        		<a class="contact-texts" href="mailto:support@colorlib.com">support@colorlib.com</a>		
				  			</div>
				  			<div class="col-md-4 col-4 header-top-bottom no-padding">
				        		<a href="index1.jsp"><img class="img-fluid" src="${pageContext.request.contextPath}/page/img/logo.png" alt="" title="" /></a>
				  			</div>
				  			<div class="col-md-4 col-4 header-top-right no-padding">
				        		<a class="contact-texts" href="tel:+440 123 12 658 439">+440 123 12 658 439</a>
				        		<a href="tel:+440 123 12 658 439"><span class="lnr lnr-phone-handset"></span></a>
				  			</div>				  							  			
				  		</div>			  					
		  			</div>
				</div>--%>
			    <div class="container main-menu">
			    	<div class="row align-items-center justify-content-center">	
						<nav id="nav-menu-container">
							<ul class="nav-menu">
							  <li class="menu-active"><a href="${pageContext.request.contextPath}/page/index1.jsp">首页</a></li>
							  <li><a href="${pageContext.request.contextPath}/actionlibrary/actionlibrary.jsp">健身课程库</a></li>
							  <li><a href="${pageContext.request.contextPath}/page/services.jsp">特设课堂</a></li>
							  <li><a href="${pageContext.request.contextPath}/page/trainers.jsp">图库</a></li>
							  <li class="menu-has-children"><a href="">更多</a>
							    <ul>
							      <li><a href="${pageContext.request.contextPath}/front/FavoritePage.jsp">我的收藏</a></li>
							      <li><a href="${pageContext.request.contextPath}/front/HistoryPage.jsp">历史记录</a></li>
							    </ul>
							  </li>
							  <li><a href="${pageContext.request.contextPath}/page/elements.jsp">联系我们</a></li>
							  <li><a href="${pageContext.request.contextPath}/page/contact.jsp">关于我们</a></li>
 							  <li>


								<div class="item-group" id="me">

									<span ><a href="${pageContext.request.contextPath}/login/userLogin.jsp">登录</a></span>|
									<span ><a href="${pageContext.request.contextPath}/register/userRegister.jsp">注册</a></span>
								</div>
							   </li>
							</ul>
						</nav><!-- #nav-menu-container -->		
			    	</div>
			    </div>
			  </header><!-- #header -->

			<!-- start banner Area -->
			<section class="banner-area relative" id="home">
				<div class="overlay overlay-bg"></div>	
				<div class="container">
					<div class="row fullscreen d-flex align-items-center justify-content-between">
						<div class="banner-content col-lg-6 col-md-12 ">
							<h1 class="text-uppercase">
								GO运动 <br>
								您的健身管理专家
							</h1>
							<p style="position: absolute; right:30px;" class="pt-10 pb-10 text-white">
								-简单的方法打造美
							</p>
							<a href="${pageContext.request.contextPath}/actionlibrary/actionlibrary.jsp" class="primary-btn" style="top: 50px;">开始锻炼</a>
						</div>										
					</div>
				</div>					
			</section>
			<!-- End banner Area -->	

			<!-- Start top-course Area -->
			<section class="top-course-area section-gap">
				<div class="container">
					<div class="row section-title">
						<h1>精选课程</h1>
						<p>The Biggest Loser</p>
					</div>	
					<div class="row">
						<div id="showVideo" class="active-topcourse-carusel">
							<div class="single-carusel item">
								<div class="thumb">
									<a href="${pageContext.request.contextPath}/VideoOfTypeController/showVideoPlay?videoId=17">
										<img class="img-fluid" data-videoid="17" src="${pageContext.request.contextPath}/page/img/a1.jpg" alt="">
									</a>




								</div>

							</div>
							<div class="single-carusel item">
								<div class="thumb">

									<a href="${pageContext.request.contextPath}/VideoOfTypeController/showVideoPlay?videoId=17">
										<img class="img-fluid" data-videoid="17" src="${pageContext.request.contextPath}/page/img/a2.jpg" alt="">
									</a>



								</div>

							</div>
							<div class="single-carusel item">
								<div class="thumb">
									<a href="${pageContext.request.contextPath}/VideoOfTypeController/showVideoPlay?videoId=17">
										<img class="img-fluid" data-videoid="17" src="${pageContext.request.contextPath}/page/img/a3.jpg" alt="">
									</a>

								</div>

							</div>
							<div class="single-carusel item">
								<div class="thumb">


									<a href="${pageContext.request.contextPath}/VideoOfTypeController/showVideoPlay?videoId=17">
										<img class="img-fluid" data-videoid="17" src="${pageContext.request.contextPath}/page/img/c1.jpg" alt="">
									</a>


								</div>

							</div>
							<div class="single-carusel item">
								<div class="thumb">

									<a href="${pageContext.request.contextPath}/VideoOfTypeController/showVideoPlay?videoId=17">
										<img class="img-fluid" data-videoid="17" src="${pageContext.request.contextPath}/page/img/c2.jpg" alt="">
									</a>


								</div>

							</div>
							<div class="single-carusel item">
								<div class="thumb">
									<img class="img-fluid" data-videoid="17" src="${pageContext.request.contextPath}/page/img/c3.jpg" alt="">

								</div>

							</div>
							<div class="single-carusel item">
								<div class="thumb">
									<img class="img-fluid" data-videoid="17" src="${pageContext.request.contextPath}/page/img/b2.png" alt="">

								</div>

							</div>
							<div class="single-carusel item">
								<div class="thumb">
									<img class="img-fluid" data-videoid="17" src="${pageContext.request.contextPath}/page/img/b1.png" alt="">

								</div>

							</div>
							<div class="single-carusel item">
								<div class="thumb">
									<img class="img-fluid" data-videoid="17" src="${pageContext.request.contextPath}/page/img/b3.png" alt="">

								</div>

							</div>
						</div>
					</div>
				</div>	
			</section>

			<section class="feature-area section-gap">
				<div class="container">
					<div class="row section-title">
						<h1>饮食推荐</h1>
						<p>Our Topnotch Features</p>
					</div>						
					<div class="row justify-content-between align-items-center">
						<div class="col-lg-6 feature-left">
                            <ul>
                                <li>
                                    <a href="">
                                        <div class="img-wrap">
                                            <img src="${pageContext.request.contextPath}/page/img/z1.jpg" alt="用手掌控制饮食量 简简单单吃出健康">
                                        </div>
                                        <div class="mask"></div>
                                        <div class="cont">
                                            <h3>用手掌控制饮食量 简简单单吃出健康</h3>
                                            <p>如果你是一个认真减肥的人，肯定会比较关注食物的卡路里。实际上，卡路里含量只是一...</p>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img-wrap">
                                            <img src="${pageContext.request.contextPath}/page/img/z2.jpg" alt="有助于瘦身的4种食材 这个夏天要多吃">
                                        </div>
                                        <div class="mask"></div>
                                        <div class="cont">
                                            <h3>有助于瘦身的4种食材 这个夏天要多吃</h3>
                                            <p>进入夏天以后，绝对是帅哥靓女展示好身材的最佳时刻。但不是每个人都是那种穿衣显...</p>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img-wrap">
                                            <img src="${pageContext.request.contextPath}/page/img/z3.jpg" alt="运动前，运动中，运动后的进食方法">
                                        </div>
                                        <div class="mask"></div>
                                        <div class="cont">
                                            <h3>运动前，运动中，运动后的进食方法</h3>
                                            <p>分享一下在运动前、中、后的饮食小诀窍，可以更好的帮助你达到健身效果。在健身时...</p>
                                        </div>
                                    </a>
                                </li>
                            </ul>

                        </div>
						<div class="col-lg-6 feature-right">
							<ul>
								<li>
									<a href="">
										<div class="img-wrap">
											<img src="${pageContext.request.contextPath}/page/img/z1.jpg" alt="用手掌控制饮食量 简简单单吃出健康">
										</div>
										<div class="mask"></div>
										<div class="cont">
											<h3>用手掌控制饮食量 简简单单吃出健康</h3>
											<p>如果你是一个认真减肥的人，肯定会比较关注食物的卡路里。实际上，卡路里含量只是一...</p>
										</div>
									</a>
								</li>
								<li>
									<a href="">
										<div class="img-wrap">
											<img src="${pageContext.request.contextPath}/page/img/z2.jpg" alt="有助于瘦身的4种食材 这个夏天要多吃">
										</div>
										<div class="mask"></div>
                                        <div class="cont">
                                            <h3>有助于瘦身的4种食材 这个夏天要多吃</h3>
                                            <p>进入夏天以后，绝对是帅哥靓女展示好身材的最佳时刻。但不是每个人都是那种穿衣显...</p>
                                        </div>
									</a>
								</li>
								<li>
									<a href="">
										<div class="img-wrap">
											<img src="${pageContext.request.contextPath}/page/img/z3.jpg" alt="运动前，运动中，运动后的进食方法">
										</div>
										<div class="mask"></div>
                                        <div class="cont">
                                            <h3>运动前，运动中，运动后的进食方法</h3>
                                            <p>分享一下在运动前、中、后的饮食小诀窍，可以更好的帮助你达到健身效果。在健身时...</p>
                                        </div>
									</a>
								</li>
							</ul>

																		-->
						</div>
					</div>
				</div>	
			</section>
			<!-- End feature Area -->

			<!-- start footer Area -->		
			<footer class="footer-area section-gap">
				<div class="container">
					<div class="row">
						<div class="col-lg-3  col-md-6 col-sm-6">
							<div class="single-footer-widget">
								<h4>About Us</h4>
								<p>
									The state of Utah in the United States is home to lots of beautiful National Parks, & Bryce Canyon National Park ranks as three of the magnificent & awe inspiring.
								</p>
							</div>
						</div>
						<div class="col-lg-4  col-md-6 col-sm-6">
							<div class="single-footer-widget">
								<h4>Contact Us</h4>
								<p>
									56/8, rockybeach road, santa monica, Los angeles, California - 59620.
								</p>
								<p class="number">
									0592-400-123-123 <br>
									0592-400-456-456
								</p>
							</div>
						</div>						
						<div class="col-lg-5  col-md-6 col-sm-6">
							<div class="single-footer-widget">
								<h4>Newsletter</h4>
								<p>You can trust us. we only send  offers, not a single spam.</p>
								<div class="d-flex flex-row" id="mc_embed_signup">


									  <form class="navbar-form" action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01" method="get">
									    <div class="input-group add-on align-items-center d-flex">
									      	<input class="form-control" name="EMAIL" placeholder="Your Email address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Email address'" required="" type="email">
											<div style="position: absolute; left: -5000px;">
												<input name="b_36c4fd991d266f23781ded980_aefe40901a" tabindex="-1" value="" type="text">
											</div>
									      <div class="input-group-btn">
									        <button class="genric-btn"><span class="lnr lnr-arrow-right"></span></button>
									      </div>
									    </div>
									      <div class="info mt-20"></div>									    
									  </form>
								</div>
							</div>
						</div>						
					</div>
				</div>
			</footer>	
			<!-- End footer Area -->

			<script src="${pageContext.request.contextPath}/page/js/vendor/jquery-2.2.4.min.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
			<script src="${pageContext.request.contextPath}/page/js/vendor/bootstrap.min.js"></script>			
<%--			<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>--%>
  			<script src="${pageContext.request.contextPath}/page/js/easing.min.js"></script>			
			<script src="${pageContext.request.contextPath}/page/js/hoverIntent.js"></script>
			<script src="${pageContext.request.contextPath}/page/js/superfish.min.js"></script>	
			<script src="${pageContext.request.contextPath}/page/js/jquery.ajaxchimp.min.js"></script>
			<script src="${pageContext.request.contextPath}/page/js/jquery.magnific-popup.min.js"></script>	
 			<script src="${pageContext.request.contextPath}/page/js/jquery-ui.js"></script>								
			<script src="${pageContext.request.contextPath}/page/js/jquery.nice-select.min.js"></script>	
			<script src="${pageContext.request.contextPath}/page/js/owl.carousel.min.js"></script>									
			<script src="${pageContext.request.contextPath}/page/js/mail-script.js"></script>	
			<script src="${pageContext.request.contextPath}/page/js/main.js"></script>

		<script>
			$(function () {
				/*导航栏变化*/
				var user="<c:out value='${sessionScope.user.userName}' />";
				var img1="<c:out value='${sessionScope.user.userImg}' />";
				var info="";
	            if(user){
		           info="<li class=\"menu-has-children\"><img src=\'${pageContext.request.contextPath}/FileDownloadServlet?fileName=${sessionScope.user.userImg}\' style=\"height: 25px;\n" +
						   "    width: 25px;\n" +
						   "    border-radius: 50%;\" onerror=\"this.src=\'${pageContext.request.contextPath}/style/images/titlel.jpg\'\" ><a style=\"color: black; font-size: 15px;    position: absolute;\n" +
						   "    top: 4px;\n" +
						   "    right: -65px;\">"+user+"</a>\n" +
						   "\t\t\t\t\t\t\t\t\t<ul>\n" +
						   "\t\t\t\t\t\t\t\t\t\t<li><a href=\"${pageContext.request.contextPath}/front/CenTer.jsp\">个人中心</a></li>\n" +
						   "\t\t\t\t\t\t\t\t\t\t<li><a href=\"javascript:void(0)\"  id=\"exit\">退出</a></li>\n" +
						   "\t\t\t\t\t\t\t\t\t</ul>\n" +
						   "\t\t\t\t\t\t\t\t</li>"
		                             $("#me").html(info);
	                     }else{
		                        info="<span ><a href=\"${pageContext.request.contextPath}/login/userLogin.jsp\">登录</a></span>|\n" +
				                "\t\t\t\t\t\t\t\t\t<span ><a href=\"${pageContext.request.contextPath}/register/userRegister.jsp\">注册</a></span>"
		                            $("#me").html(info);
	                          }
	               /*前端退出*/
				$(document).on("click","#exit",function(){
					$.ajax({
						async:true,
						type:"get",
						url:"${pageContext.request.contextPath}/UserController/exit",
						success:function (data) {
							info="<span ><a href=\"${pageContext.request.contextPath}/login/userLogin.jsp\">登录</a></span>|\n" +
									"\t\t\t\t\t\t\t\t\t<span ><a href=\"${pageContext.request.contextPath}/register/userRegister.jsp\">注册</a></span>"
							$("#me").html(info);
						}
					})
				})

                /**
                 * 首页九张图片跳转
                 */
                $(document).on("click",".img-fluid",function(){
                    var videoId=$(this).data('videoid');

                })

			})


		</script>
		</body>
	</html>